<template>
	<div class="addBox">
		<div class="addBoxTop">
			<div v-if="detailsId">
				<span class="font_size20">{{ objectForm.type == 1 ? '投票' : '报名' }}详细</span>
			</div>
			<div v-else class="font_size20">投票/报名</div>
			<!-- <div>
				<el-button size="mini" type="primary" @click="addTpBm">新增投票/报名</el-button>
			</div> -->
		</div>
		<div class="addDiv" v-loading="sLoading">
			<el-form ref="form" :model="objectForm" :rules="objectRules" label-width="140px">
				<el-form-item label="使用云店" prop="shopid_yd">
					<el-select v-model="objectForm.shopid_yd" placeholder="请选择"
						:disabled="isDisabled || isDisbableInfo.type">
						<el-option v-for="item in getYunShopsList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动类型" prop="type">
					<el-select v-model="objectForm.type" placeholder="请选择"
						:disabled="isDisabled || isDisbableInfo.type">
						<el-option v-for="item in activityTypeDict" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="activityTypeDictMap[objectForm.type] ? activityTypeDictMap[objectForm.type] + '标题' : '标题'"
					prop="title">
					<el-input v-model="objectForm.title" class="input-w" placeholder="请填写标题, 20个文字内" maxlength="20"
						show-word-limit :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item
					:label="activityTypeDictMap[objectForm.type] ? activityTypeDictMap[objectForm.type] + '描述' : '描述'"
					prop="desc">
					<el-input v-model="objectForm.desc" class="input-w" placeholder="请填写描述, 50个文字内" maxlength="50"
						show-word-limit :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item label="标题描述开关">
					<div class="switchDiv">
						<el-switch v-model="objectForm.title_is" active-value="1" inactive-value="2"
							:disabled="isDisabled"></el-switch>
						<span class="tip-text">关闭后云店不可见</span>
					</div>
				</el-form-item>
				<el-form-item label="名额限定" prop="num">
					<el-input-number size="small" v-model="objectForm.num" controls-position="right"
						style="width: 217px;" :min="0" :disabled="isDisabled"></el-input-number><span
						class="tip-text">(默认0代表不限制人数)</span>
				</el-form-item>
				<el-form-item
					:label="activityTypeDictMap[objectForm.type] ? activityTypeDictMap[objectForm.type] + '费用' : '费用'"
					prop="price">
					<el-input v-model="objectForm.price" placeholder="请填写费用金额" :min="0" style="width: 217px;"
						:disabled="isDisabled" @input="handlePriceInput"></el-input><span class="tip-text">(元)</span>
				</el-form-item>
				<el-form-item :label="'价值金额'" prop="price2">
					<el-input v-model="objectForm.price2" placeholder="请填写商品价值金额" :min="0" style="width: 217px;"
						:disabled="isDisabled" @input="handlePrice2Input"></el-input><span class="tip-text">(元)</span>
				</el-form-item>
				<el-form-item label="活动时效" prop="objectTime">
					<el-date-picker v-model="objectForm.objectTime" @change="timestampFun" type="daterange"
						:clearable="false" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
						format="yyyy-MM-dd" value-format="yyyy-MM-dd" :disabled="isDisabled"
						:picker-options="pickerOptions">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="活动说明" prop="txt_info">
					<el-input type="textarea" v-model="objectForm.txt_info" class="input-w" placeholder="请填写投票/报名说明"
						show-word-limit :disabled="isDisabled"></el-input>
				</el-form-item>

				<el-form-item label="使用规则" prop="txt_rule">
					<el-input type="textarea" v-model="objectForm.txt_rule" class="input-w" placeholder="请填写投票/报名规则"
						show-word-limit :disabled="isDisabled"></el-input>
				</el-form-item>
				<el-form-item
					:label="activityTypeDictMap[objectForm.type] ? activityTypeDictMap[objectForm.type] + '对象' : '选择对象'"
					prop="obj_ls">
					<div class="object-box">
						<div class="object-item" v-for="(item, imIndex) in objectForm.obj_ls" :key="item.id">
							<div class="object-item-img-box" @click="!isDisabled && chooseImg('obj_ls', imIndex)">
								<el-image v-if="item.img" :src="item.img_rel" alt="" class="object-item-img"></el-image>
								<div class="image-slot" v-else>
									<i class="el-icon-plus"></i>
								</div>
							</div>
							<div class="object-item-name-box">
								<div>对象名：</div>
								<el-input type="text" placeholder="输入对象名" size="mini" v-model="item.title"
									class="object-item-name" :disabled="isDisabled"></el-input>
							</div>
							<!-- v-if="objectForm.obj_ls.length > 1" -->
							<div class="object-item-delete-box" @click="!isDisabled && deleteObject(imIndex)">
								<i class="el-icon-delete" style="color: #c00;"></i>
							</div>
						</div>
						<div class="add-object" @click="addObject">
							<el-button type="primary" icon="el-icon-plus" circle :disabled="isDisabled"></el-button>
						</div>
					</div>
				</el-form-item>
				<el-form-item
					:label="activityTypeDictMap[objectForm.type] ? activityTypeDictMap[objectForm.type] + '模版' : '模版'">
					<div class="mb-box">
						<div class="title">背景音乐</div>
						<el-select v-model="objectForm.music" placeholder="请选择" :disabled="isDisabled">
							<el-option v-for="(item, index) in musicList" :key="index" :label="item.title"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
					<div class="">
						<div class="title">
							<span> {{ adMode == 1 ? '广告图片' : '广告背景颜色' }} </span>
							<span class="tip-text" v-if="adMode == 1">(至少上传2张图片)</span>
							<span class="tip-text" v-else>(至少选择一种颜色)</span>
							<span class="ml20 switch-mode" @click="switchMode">
								<i class="el-icon-sort" style="transform: rotate(90deg);"></i>
								<a style="margin-left: 3px;"> {{ adMode == 1 ? '使用纯色' : '使用背景图片' }} </a>
							</span>
							<span v-if="adMode == 1" class="font_red bold font_size16 ml10">
								（第一张图片默认作为移动端首页图，及海报分享封面图，宽高比例 3:4） </span>
						</div>
						<div v-if="adMode == 1">
							<UploadPhotos :list="photoList" @update:list="updatePhotoList" />
						</div>
						<div>
							<template v-if="adMode == 2">
								<el-color-picker v-model="objectForm.obj_color" color-format="hex"
									:disabled="isDisabled">
								</el-color-picker>
							</template>
						</div>
					</div>
					<div class="">
						<div class="title">
							<span>风格颜色</span>
							<span class="tip-text">(默认：#FFED4E)</span>
						</div>
						<el-color-picker v-model="objectForm.tpl_color1" color-format="hex"
							:disabled="isDisabled"></el-color-picker>
					</div>
				</el-form-item>
				<el-form-item label="启用" prop="value1">
					<div class="switchDiv">
						<el-switch v-model="objectForm.value1" :disabled="isDisabled"></el-switch>
					</div>
				</el-form-item>
				<el-form-item label="活动是否虚构投票" prop="value2" label-width="140px">
					<div class="switchDiv">
						<el-switch v-model="objectForm.value2" :disabled="isDisabled"></el-switch>
					</div>
				</el-form-item>

				<h3 style="font-size: 16px; font-weight: bold; margin-bottom: 10px;"> 活动负责人信息 </h3>
				<div class="mb20" style="background: #f5f5f5;width: 100%;padding: 20px;border-radius: 4px;">
					<el-form-item label="活动店名/场地名称" prop="addname" label-width="144px">
						<el-input v-model="objectForm.addname" placeholder="活动店名/场地名称" style="width: 217px;"
							:disabled="isDisabled">
						</el-input>
					</el-form-item>
					<el-form-item label="活动负责人姓名" prop="adm_uname" label-width="124px">
						<el-input v-model="objectForm.adm_uname" placeholder="姓名" style="width: 217px;"
							:disabled="isDisabled">
						</el-input>
					</el-form-item>
					<el-form-item label="活动负责人电话" prop="adm_phone" label-width="124px">
						<el-input v-model="objectForm.adm_phone" placeholder="电话号码" type="tel" maxlength="11"
							style="width: 217px;" :disabled="isDisabled">
						</el-input>
					</el-form-item>

					<el-form-item label="负责人二维码" prop="adm_qrcode" label-width="124px">
						<div class="object-box">
							<UploadPhotos :list="adm_qrcode_arr" :limit="1" @update:list="updatePhotoQrCodeList" />
						</div>
					</el-form-item>
					<el-form-item label="活动举办地址" prop="address" label-width="124px">
						<el-input v-model="objectForm.address" class="input-w mb20" :placeholder="'例如：广东省广州白云区嘉大广场'"
							show-word-limit :disabled="isDisabled"></el-input>
						<tengxunMapSelect 
							:addr="addrDetail" 
							:latlon="{
								latitude: objectForm.latitude,
								longitude: objectForm.longitude
							}" 
							ref="tengxunMapSelect" 
							@mapLnglat="mapLnglat"
						>
						</tengxunMapSelect>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div class="addDivBtn">
			<div class="disabled-btn" v-if="isDisabled">提交</div>
			<div class="acvite-btn" @click="createActivity" v-else>提交</div>
			<div class="back-btn" @click="goBack">返回</div>
		</div>
		<!-- 时间列表 -->
		<timeList @pushtimeData="pushtimeData" ref="timeList"></timeList>
	</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, watch, computed, defineExpose } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import timeList from "@/components/marketingMenu/timeList.vue"
import uploadPic from "@/js/upload/UploadPic.js"
import staticConst from "@/js/const/StaticConst.js"
import { generateRandom4Digits, priceInput } from '@/utils/common.js'
import { activityDict } from '@/utils/dict.js'
import UploadPhotos from "@/components/commV2/UploadPhotos/index.vue"
import tengxunMapSelect from "@/components/comm/tengxunMapSelect.vue";

// 获取当前组件实例
const { proxy } = getCurrentInstance()

const props = defineProps({
	getYunShopList: {
		type: Array,
		default: () => [],
	},
	detailID: {
		type: String,
		default: "",
	},

	// 如果是编辑页面，设置某些值不能编辑
	isDisbableInfo: {
		type: Object,
		default: () => ({
			type: false,
		}),
	},
})

const OSS_HOST = ref(config.OSS_HOST)

const emit = defineEmits(['addTpBmFun'])

// Refs
const form = ref(null)
const sLoading = ref(false)

// 图片列表  photoList 只接受2个参数  url 和 name
const photoList = ref([])
const updatePhotoList = (newList) => {
	photoList.value = newList
}

const adm_qrcode_arr = ref([])
const updatePhotoQrCodeList = (newList) => {
	adm_qrcode_arr.value = newList
}

const adMode = ref(1) // 1 图片模式 2 纯色模式
const switchMode = () => {
	// photoList.value = []
	adMode.value = adMode.value == 1 ? 2 : 1
	if (adMode.value == 1) {
		objectForm.value.obj_color = ''
	} else {
		// photoList.value = []
	}
}

// State
const objectForm = ref({
	act: "add",
	id: "",
	shopid_yd: "",
	type: "",
	title: "",
	desc: "",
	title_is: false,
	num: 0,
	price: 0,
	price2: 0,
	objectTime: [],
	time_from: "",
	time_to: "",
	time_ls: [],
	txt_info: "",
	txt_rule: "",
	music: "1",
	tpl_color: "1",
	tpl_color1: "#FFED4E",
	tpl_color2: "",
	tpl_ls: "1",
	sort_type: "1",
	obj_ls: [],
	tpl_ad: [],
	// {
	// 	obj_type: "1",
	// 	obj_img: "",
	// 	obj_id: generateRandom4Digits(),
	// 	obj_img_rel: ""
	// }
	status: 1,
	value1: true,
	value2: true,
	obj_color: "",
	adm_uname: "",
	adm_phone: "",
	adm_qrcode: "",
	longitude: "",
	latitude: "",
	address: "",
	addname: "",
})

const objectRules = ref({
	shopid_yd: [
		{ required: true, message: '请选择云店', trigger: 'change' }
	],
	type: [
		{ required: true, message: '请选择类型', trigger: 'change' }
	],
	title: [
		{ required: true, message: '请输入投票/报名标题', trigger: 'blur' },
	],
	desc: [
		{ required: true, message: '请输入投票/报名描述', trigger: 'blur' },
	],
	objectTime: [
		{ required: true, message: '选择开放日期', trigger: 'blur' },
	],
	adm_uname: [
		{ required: true, message: '请输入活动负责人姓名', trigger: 'blur' },
	],
	adm_phone: [
		{ required: true, message: '请输入活动负责人电话', trigger: 'blur' },
	],
	address: [
		{ required: true, message: '请输入活动地址', trigger: 'blur' },
	],
	addname: [
		{ required: true, message: '请输入活动店名/场地名称', trigger: 'blur' },
	],
})

const activityTypeDict = ref(activityDict.activityTypeDictList)
const activityTypeDictMap = ref(activityDict.activityTypeDictMap)

const musicList = ref([])
const goodNum = ref(0)

const getYunShopsList = computed(() => {
	return props.getYunShopList
})

// 广东省广州白云区美兴大厦
const addrDetail = ref("广东省广州白云区嘉大广场")
const mapLnglat = (data) => {
	console.log("data地图经纬度--=", data);
	objectForm.value.longitude = data.lng;
	objectForm.value.latitude = data.lat;
}

watch(() => objectForm.value.address, (newVal) => {
	let timer = null
	if (timer) {
		clearTimeout(timer)
	}
	timer = setTimeout(() => {
		if (newVal) {
			addrDetail.value = newVal
		}
	}, 500)
}, { immediate: true })


const restFun = () => {
	objectForm.value.id = ""
	detailsId.value = ''
	objectForm.value.tpl_color1 = '#FFED4E'
	objectForm.value.status = false
	form.value?.resetFields()
	objectForm.value.act = 'add'
	objectForm.value.obj_ls = [
		// {
		// 	id: generateRandom4Digits(),
		// 	title: "",
		// 	img: "",
		// 	img_rel: ""
		// }
	]

	objectForm.value.tpl_ad = []
	photoList.value = []
	adm_qrcode_arr.value = []
}

const idyun = ref("")
const url = ref("")
const chooseImg = (type, index) => {
	if (isDisabled.value) return
	uploadPic.idyun = idyun
	uploadPic.type = staticConst.UPLOAD_AVATAR
	uploadPic.uploadSussecc = uploadSuccess
	uploadPic.chooseImage1(callBack)

	function callBack(data) {
		url.value = data?.url
	}

	function uploadSuccess(data) {
		newUploadPicSuccess(data, type, index)
	}
}

const newUploadPicSuccess = (result, type, batchid) => {
	if (type == 'obj_ls') {
		objectForm.value.obj_ls[batchid].img = result.name // 图片名称
		objectForm.value.obj_ls[batchid].img_rel = result.url // 图片url
	} else if (type == 'tpl_ad_img') {
		objectForm.value.tpl_ad_img = result.name // 图片名称
		objectForm.value.tpl_ad_img_rel = result.url // 图片url
	}
}

const addObject = () => {
	console.log("addObjectxxx--=", objectForm.value.obj_ls)
	if (isDisabled.value) return
	objectForm.value.obj_ls.push({
		title: "",
		img: "",
		id: generateRandom4Digits(),
	})
}

const deleteObject = (index) => {
	objectForm.value.obj_ls.splice(index, 1)
}

const timestampFun = (e) => {
	if (!objectForm.value.shopid_yd) return proxy.$message.error("请选择云店")
	if (!e) {
		objectForm.value.objectTime = ""
		objectForm.value.time_from = ""
		objectForm.value.time_to = ""
		return
	}
	objectForm.value.time_from = objectForm.value.objectTime[0]
	objectForm.value.time_to = objectForm.value.objectTime[1]
}

const submitForm = async (formName) => {
	console.log("objectForm.value=", objectForm.value)
	const valid = await form.value?.validate()
	if (valid) {
		const { obj_ls, type } = objectForm.value

		// if (type == 1) {
		// 	const hasEmptyFields = obj_ls.some(item => {
		// 		if (!item.title || !item.img) {
		// 			proxy.$message.error('请填写完整的投票对象')
		// 			return true
		// 		}
		// 		return false
		// 	})
		// 	if (hasEmptyFields) return
		// }

		const photosList = photoList.value
		if (adMode.value == 1 && photosList.length < 2) {
			proxy.$message.error('请上传至少2张广告背景图片')
			return
		}

		if (adMode.value == 2 && !objectForm.value.obj_color) {
			proxy.$message.error('请选择广告背景颜色')
			return
		}
		let tpl_ad = []
		if (adMode.value == 1) {
			tpl_ad = photosList.map(item => ({
				obj_color: "",
				obj_type: "",
				obj_img: item.name,
				obj_id: item.id,
				obj_img_rel: item.url
			}))
		} else {
			let obj1_color = objectForm.value.obj_color
			obj1_color = obj1_color.startsWith('#') ? obj1_color.substring(1) : obj1_color
			tpl_ad = [{
				obj_color: obj1_color,
				obj_type: "",
				obj_img: "",
				obj_id: "",
				obj_img_rel: ""
			}]
		}

		let c1 = objectForm.value.tpl_color1
		// 处理颜色值，如果有 # 则去除
		c1 = c1.startsWith('#') ? c1.substring(1) : c1
		const params = {
			...objectForm.value,
			tpl_color1: c1,
			tpl_color2: c1,
			status: objectForm.value.value1 ? 2 : 1,
			isv: objectForm.value.value2 ? 1 : 2,
			tpl_ad
		}
		const qrcodeList = adm_qrcode_arr.value
		if (qrcodeList.length == 0) {
			proxy.$message.error('请选择活动负责人加好友二维码')
			return
		} else {
			params.adm_qrcode = qrcodeList[0].url
		}
		console.log("params=", params)
		const res = await proxy.$api({ url: config.YY_EVENT_SAVE, data: params })
		if (res.status == 1) {
			proxy.$message.success(res?.msg || '操作成功')
			emit("addTpBmFun", {
				type: objectForm.value.act,
			})
		} else {
			proxy.$message.error(res?.msg || '操作失败')
		}
	}
}

const createActivity = () => {
	submitForm("form")
}

const goBack = () => {
	emit("backFun", 'back')
}

const getMusicList = async () => {
	const param = {}
	const res = await proxy.$api({ url: config.YX_PIN_MUSIC_LS, data: param })
	if (res.status == 1 && res.data.music_ls) {
		musicList.value = res.data.music_ls
	}
}

const getTimeList = async () => {
	const param = {
		eventid: "",
		shopid_yd: objectForm.value.shopid_yd,
		stime: objectForm.value.time_from,
		dtime: objectForm.value.time_to,
	}
	const res = await proxy.$api({ url: config.YX_XSMS_TIME_LS, data: param })
	if (res.status == 1 && res.data.t_ls.length) {
		timeList.value.timeArr = res.data.t_ls
		timeList.value.timeLsFun()
	}
}

const determineFun = (data) => {
	goodNum.value = data.length
	objectForm.value.gd_ls = goodsDataClassify(data)
}

const goodsDataClassify = (data) => {
	return data.map(item => ({
		gdid: item.gdid,
		unitid: item.unit_id,
		specid: item.specid,
		number: item.number,
		price: item.price,
		pricec: item.pricec,
		money_q: item.money_q,
		txt: item.txt,
	}))
}

const pushtimeData = (e) => {
	objectForm.value.time_ls = e
}

// 获取详情
const getDetail = async () => {
	sLoading.value = true
	const res = await proxy.$api({ url: config.YY_EVENT_INFO, data: { id: props.detailID } }).finally(() => {
		setTimeout(() => {
			sLoading.value = false
		}, 200)
	})
	objectForm.value.tpl_color1 = ''
	if (res.status === 1 && res.data) {
		// 将获取到的数据赋值到 objectForm
		const data = res.data
		objectForm.value = {
			// ...objectForm.value,
			...data,
			act: "edt",
			type: Number(data.type),
			objectTime: [data.time_from_txt, data.time_to_txt],
			time_from: data.time_from_txt,
			time_to: data.time_to_txt,
			txt_info: data.txt_info,
			txt_rule: data.txt_rule,
			music: data.music.id,
			tpl_color1: data.tpl_color1 ? `#${data.tpl_color1}` : '#FFED4E',
			obj_ls: data.obj_ls ? data.obj_ls.map((item) => {
				return {
					id: item.id,
					title: item.title,
					img: item.img_rel,
					img_rel: item.img,
				}
			}) : [],
			tpl_ad_img: data.tpl_ad_img,
			value1: data.status == 2 ? true : false,
			value2: data.isv == 1 ? true : false,
			address: data?.me_info?.address || '',
			longitude: data?.me_info?.longitude || '',
			latitude: data?.me_info?.latitude || '',
			addname: data?.me_info?.addname || '',
		}
		addrDetail.value = data.me_info?.address
		photoList.value = data.tpl_ad.map(item => ({
			obj_type: item?.obj_type,
			name: item?.obj_img_rel,
			url: item?.obj_img,
			id: item?.obj_id
		}))
		adm_qrcode_arr.value = data.adm_qrcode ? [{
			url: data.adm_qrcode
		}] : []
		objectForm.value.obj_color = data.tpl_ad[0]?.obj_color ? `#${data.tpl_ad[0]?.obj_color}` : ''
		adMode.value = data.tpl_ad && data.tpl_ad[0]?.obj_color ? 2 : 1
	}
}

// 修改 watch 实现
const detailsId = ref("")
watch(() => props.detailID, (newVal) => {
	console.log("detailID changed:", newVal)
	setTimeout(() => {
		if (newVal) {
			detailsId.value = newVal
			getDetail()
			form.value?.resetFields()
		}
		if (!newVal) {
			console.log("newValxxxx=", newVal)
			restFun()
		}
	}, 200)
}, { immediate: true })

// Lifecycle hooks
onMounted(() => {
	console.log("onMounted=xx=");
	getMusicList()
})

// 添加计算属性
const isDisabled = computed(() => {
	const disabledStatus = ["7"]
	return disabledStatus.includes(objectForm.value.status)
})

// 添加日期选择器配置
const pickerOptions = {
	disabledDate(time) {
		// 禁用今天之前的日期
		return time.getTime() < Date.now() - 8.64e7; // 8.64e7 是一天的毫秒数
	}
}

const handlePriceInput = (value) => {
	objectForm.value.price = priceInput(value)
}

const handlePrice2Input = (value) => {
	objectForm.value.price2 = priceInput(value)
}

const handleUploadSuccess = ({ item, index, type }) => {
	// Handle upload success
	console.log('Upload successful:', item, index, type);
}

const handleDelete = ({ index, item }) => {
	// Handle delete
	console.log('Delete item:', index, item);
}

const handleDragEnd = (photoArr) => {
	// Handle drag end
	console.log('Photos reordered:', photoArr);
}


// Expose the restFun method and objectForm ref to parent components
// Expose the restFun method to parent components
defineExpose({
	restFun,
	objectForm
})

</script>

<style lang="scss" scoped>
.addBox {
	width: 100%;
	box-sizing: border-box;

	.addDivBtn {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: right;
		border-top: 1px solid #E4E7ED;

		>div {
			display: inline-block;
			background: #3388ff;
			font-size: 16px;
			height: 100%;
			color: #FFFFFF;
			text-align: center;
			padding: 0 20px;
			cursor: pointer;
			border-right: 1px solid #FFFFFF;

			&:last-child {
				border: none;
			}
		}

		.back-btn {
			background: #ece8e8;
			color: #333;
			border-right: 1px solid #ececec;
		}
	}

	.addBoxTop {
		width: 100%;
		height: 40px;
		border-bottom: 2px solid #E4E7ED;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.addDiv {
		box-sizing: border-box;
		width: 100%;
		padding-right: 100px;
		height: calc(100vh - 57px - 70px);
		overflow-y: auto;

		.switchDiv {
			height: 40px;
			display: flex;
			align-items: center;

			span {
				margin-right: 20px;
			}
		}

		.timeShowBox {
			// width: 600px;
			height: 40px;
			border: 1px solid #DCDFE6;
			border-radius: 5px;
			cursor: pointer;

			.timeShowdiv {
				padding: 0 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				span {
					margin-right: 10px;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	::v-deep.mb-box {
		margin-bottom: 10px;

		&:last-child {
			margin: 0;
		}

		.el-radio__label {
			display: none;
		}

		.pl-box {
			font-size: 14px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			cursor: pointer;

			span {
				margin-right: 10px;
			}

			img {
				margin-right: 10px;
				width: 25px;
				height: 25px;
			}

			.txt-box {
				width: 145px;
				display: flex;
				align-items: center;
			}
		}

		.color-box {
			display: flex;
			font-size: 14px;

			.color-row {
				margin-right: 10px;
				text-align: center;
				cursor: pointer;

				.color-title {
					font-size: 12px;
					margin: 10px 0;
				}

				.background-item {
					width: 80px;
					height: 80px;
				}
			}
		}
	}
}

.tip-text {
	font-size: 12px;
	color: #666;
	margin-left: 10px;
}

.object-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 10px;

	.object-item {
		box-sizing: border-box;
		height: 80px;
		width: 300px;
		padding: 10px;
		border: 1px solid #DCDFE6;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		gap: 10px;
		position: relative;

		.object-item-img-box {
			box-sizing: border-box;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			overflow: hidden;
			text-align: center;
			vertical-align: middle;
			overflow: hidden;
			padding: 3px;
			border: 1px solid #DCDFE6;

			.image-slot {
				margin: 0 auto;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.object-item-name-box {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin-left: 5px;
			flex: 1;

			div {
				font-size: 12px;
				color: #666;
			}

			.object-item-name {
				flex: 1;
			}
		}

		.object-item-delete-box {
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			width: 20px;
			height: 20px;
			background-color: rgba(0, 0, 0, 0.1);
			border-bottom-left-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 12px;

			&:hover {
				background: rgba(0, 0, 0, 0.3);
			}
		}

	}
}

.object-item-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

::v-deep .el-color-picker__trigger,
.tpl-ad-img {
	width: 100px !important;
	height: 100px !important;
	border: 1px solid #DCDFE6;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;

	.object-item-img {
		border-radius: 0;
	}
}

::v-deep .el-color-picker__color {
	border: none !important;
}

::v-deep .el-color-picker__color-inner {
	border: none !important;
}

::v-deep .el-color-picker__mask {
	display: none !important;
}

.ml20 {
	margin-left: 20px;
}

.switch-mode {
	color: #3388ff;
	cursor: pointer;
}

.disabled-btn {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.acvite-btn {
	opacity: 1;
	cursor: pointer;
}

::v-deep .el-icon-close:before {
	content: "\e6df";
}

.undertake-info {
	background-color: #f5f7fa;
	padding: 10px;
	border-radius: 5px;
}
</style>